<template>
    <div class="oneImg" :class="{'noImg':!options.imageUrl}" draggable="false" >
        <div :style='`padding-top:${options.paddingTop/2}px;padding-bottom:${options.paddingBottom/2}px;`'>
            <img :src="options.imageUrl" alt="">
            <div class="box_shadow" v-if='!options.imageUrl'>
                <div class="react_box"></div>
                <p>请在右侧添加需要的图片</p>
            </div>
         </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            options:{}
        }
    },
    props:{
        option:{
            type:Object
        }
    },
    watch:{
        option:function(val){
            this.options =JSON.parse(JSON.stringify(val));
        }
    },
    mounted(){
        this.options =JSON.parse(JSON.stringify(this.option));
    }
}
</script>
<style lang="less" scoped>
    .oneImg{
        width:100%;
        height: auto;
        // min-height:200px;
        position:relative;
        // background:#ffffff;
        img{
            width:100%;
            height:100%;
        }
    }
    .noImg{
        min-height:200px;
        // background:#F8F3F0;
    }
    .box_shadow{
        position:absolute;
        width:100%;
        height:100%;
        z-index: 200;
        top:0;
        left:0;
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 14px;
        color:#918985;
        .react_box{
            width:70px;
            height:56px;
            margin-bottom:19px;
            background:url('~@/assets/img/editContent/pic-nor.png') center center  no-repeat;
            background-size:cover;
        }
    }
</style>